import { post } from '@feidao-factory/send-msg/browser/request';

/**
 * 图片参数
 * 	img:string  图片地址
 * 	index:string  图片下标跟参数images对应 下标从1开始
 * 	x:坐标x轴
 * 	y:坐标y轴
 * 	width:图片的宽度
 * 	height:图片的高度
 */
export interface Images {
	src: string;
	x: number;
	y: number;
	width: number;
	height: number;
}

function load_img(src: string) {
	const image = document.createElement('img');
	image.setAttribute('crossOrigin', 'anonymous');
	image.src = src;
	return new Promise<HTMLImageElement>((res, rej) => {
		if (image.complete) {
			res(image);
		}
		// image.onabort = rej;
		// image.oncancel = rej;
		image.onerror = rej;
		image.onload = () => {
			res(image);
		};
	});
}

/**
 * 合并图片
 * @param file_server 文件服务器地址，不带/后缀，如<http://192.168.40.196>
 * @param productid 产品ID
 * @param imgs:IOption[] 原图片(可以通过fd-w000024控件的get_original_image方法获取)
 * @return Promise<string[][]>(最后合并的完整图片是每个数组中的最后一个值)
 * @example const images=merge_picture('http://192.168.40.196','jewelry_mall',{
 * 	src: 'https://images.gitee.com/uploads/69/1961669_xiapeixu.png?1530761784',x: 0,y: 0,width: 100,height: 100,
 * });
 */
export default async function merge_picture(file_server: string, productid: string, imgs: Images[]) {
	// load all images
	const images = await Promise.all(imgs.map(async (it) => {
		return {
			h: it.height,
			img: await load_img(it.src),
			w: it.width,
			x: it.x,
			y: it.y
		};
	}));
	// 创建原始画板
	const canvas = document.createElement('canvas');
	// 设置宽高
	// find max width and max height
	const [max_w, max_h] = images.reduce(([w, h], img) => {
		return [Math.max(w, img.img.width), Math.max(h, img.img.height)];
	}, [0, 0]);
	canvas.width = max_w;
	canvas.height = max_h;
	// 获取绘图的环境
	const ctx = canvas.getContext('2d')!;
	// draw
	images.forEach((img) => {
		// 参数 1 图片对象， 2,3,4,5 被绘制图片上的起始位置和宽高， 6,7,8,9在画布上绘制的位置以及宽高
		ctx.drawImage(img.img, 0, 0, img.w, img.h, img.x, img.y, img.w, img.h);
	});

	try {
		const ret = await post(`${file_server}/fsweb/upload?productid=${productid}`, JSON.stringify({
			file_name: 'merged-image.png',
			file_string: canvas.toDataURL()
		}));
		const res = JSON.parse(ret.responseText);
		return res[0];
	} catch (error) {
		throw new Error('上传失败' + error);
	}
}
